<template>
  <div>
    <el-row style="background-color: aqua">
      <el-col :span="24"><h1>这是布局的头部</h1></el-col>

    </el-row>
    <el-row style="background-color: aqua">

      <el-col :span="20" style="background-color: #181818">
        <el-row style="background-color: aqua">
          <el-col :span="12" style="background-color:#0048ff"><h1>这是布局的左边</h1></el-col>
          <el-col :span="12" style="background-color: #1fe06c"><h1>这是布局的右边</h1></el-col>
        </el-row>
      </el-col>

    </el-row>


    <el-button type="primary">主要按钮</el-button>
    <el-button type="success">成功按钮</el-button>
    <el-button type="info">信息按钮</el-button>
    <el-button type="warning">警告按钮</el-button>
    <el-button type="danger">危险按钮</el-button>
    <!--带图标的按钮-->
    <el-button type="primary">
      <el-icon class="el-icon--left">
        <Search/>
      </el-icon>
    </el-button>
    <!--单选框-->
    <el-radio-group v-model="sex">
      <el-radio label="1" size="large">男</el-radio>
      <el-radio label="0" size="large">女</el-radio>
    </el-radio-group>

    <!--复选框-->
    <el-checkbox-group v-model="movement">
      <el-checkbox label="1">跑步</el-checkbox>
      <el-checkbox label="2">跳高</el-checkbox>
      <el-checkbox label="3">打乒乓球</el-checkbox>
      <el-checkbox label="4">打篮球</el-checkbox>
    </el-checkbox-group>

    <!--  动态遍历复选框-->
    <!--    提交时 要新建一个数组 -->
    <el-checkbox-group v-model="testArray">
      <el-checkbox :label="m.id" v-for="m in movementArray" :key="m.id">
        {{ m.name }}
      </el-checkbox>
    </el-checkbox-group>


    <!--    下拉框-->

    <el-select v-model="choose" placeholder="请选择">
      <!--      label表示显示的值，value代表需要提交服务器的值-->
      <el-option label="高中" value="1"></el-option>
      <el-option label="大专" value="2"></el-option>
      <el-option label="本科" value="3"></el-option>
      <el-option label="研究生" value="4"></el-option>
    </el-select>

    <!-- 日期选择框   -->
    <!--  value-format 日期格式  -->
    <el-date-picker v-model="time" type="date" placeholder="选择日期" value-format="YYYY--MM--DD">

    </el-date-picker>
    <!--    选择日期和时间-->
    <el-date-picker v-model="times" type="datetime" placeholder="选择日期和时间" value-format="YYYY--MM--DD HH--mm--ss">

    </el-date-picker>
    <!--    基础表格-->
    <el-table :data="userList" stripe>
      <!--      prop 表示绑定哪一个属性-->
      <!--      label标头的名称-->
      <el-table-column prop="id" label="id"></el-table-column>
      <el-table-column prop="name" label="名称"></el-table-column>
      <el-table-column prop="sex" label="性别"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>

    </el-table>

    <!--    服务端渲染表格-->


    <el-table :data="bookList" stripe>
      <el-table-column prop="id" label="id"></el-table-column>
      <el-table-column prop="name" label="名称"></el-table-column>
      <el-table-column prop="author" label="作者"></el-table-column>
      <el-table-column prop="desc" label="描述"></el-table-column>


      <el-table-column label="状态">
        <template #default="scope">
          <!--          三元表达式  三目运算符-->
          {{ scope.row.sex == 1 ? '可售' : '下架' }}
        </template>
      </el-table-column>

      <el-table-column prop="price" label="价格"></el-table-column>


      <el-table-column label="数量">
        <template #default="scope">
          <el-input v-model="scope.row.number"></el-input>
        </template>
      </el-table-column>

      <el-table-column label="总价">
        <template #default="scope">
          {{ scope.row.price * scope.row.number }}
        </template>
      </el-table-column>

      <el-table-column prop="time" label="时间"></el-table-column>

      <el-table-column label="操作">
        <!--        scope 得到表单某一行整个对象（包括数据对象，以及页面标签对象等）-->
        <!--        scope.row 得到当前这一行对象-->
        <!--        #default 插槽表达式  scope变量名-->
        <template #default="scope">
          <el-button type="primary" @click="deleteBook(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>


    </el-table>
    <!--   el-dialog     对话框-->
    <!--   对话框绑定model时，一般绑定布尔值，该值表示当前对话框是否显示-->
    <el-dialog v-model="dialogVisible" title="添加用户" width="30%">
      <!--      <span>这是一个添加用户操作</span>-->
      <el-form :model="userForm" ref="userForm" :rules="rules">
        <!--<el-form-item 表单中的每一行，由框架底层提供样式布局>-->
        <!--label 表单的描述-->
        <el-form-item label="姓名" prop="userName">
          <el-input v-model="userForm.userName"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio-group v-model="userForm.sex">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="2">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="生日" prop="birthday">
          <el-date-picker type="data" value-format="YYYY-MM-DD"
                          v-model="userForm.birthday" placeholder="请选择生日"></el-date-picker>
        </el-form-item>

        <el-form-item label="密码" prop="passWord">
          <el-input type="password" v-model="userForm.passWord"></el-input>
        </el-form-item>

        <el-form-item label="电话号码" prop="tel">
          <el-input v-model="userForm.tel"></el-input>
        </el-form-item>
      </el-form>
      <!--#footer 表示当前template中内容 当前对话框的脚步      -->
      <template #footer>
        <!--     class="dialog-footer"  使用elmentui中对话框的样式   -->
        <span class="dialog-footer">
        <el-button type="primary" @click="cancel()">取消</el-button>
        <el-button type="primary" @click="addUser()">确定</el-button>
          </span>
      </template>
    </el-dialog>
    <el-button type="primary" @click="dialogVisible=true">打开对话框</el-button>

    <!--    //v-model:current-page 绑定当前页码-->
    <!--    v-model:page-size绑定每页显示多少条-->
    <!--    background 分页标签的颜色-->
    <!--    绑定总条数total-->
    <el-pagination v-model:current-page="curPage" v-model:page-size="pageSize"
                   background :total="total" @current-change="changeCurPage" >

    </el-pagination>

  </div>


</template>

<script>
import axios from "axios";
import {ElMessage} from "element-plus";

export default {
  created() {
    axios.post("/api/book/list", null).then(res => {
      this.bookList = res.data

    })
  },
  name: "NewApp",
  data() {
    return {
      curPage: 1,
      pageSize: 10,
      total: 100,
      sex: '1',
      movement: [],
      testArray: [],
      movementArray: [{id: 1, name: "张三"}, {id: 2, name: "李四"}, {id: 3, name: "王五"}, {id: 4, name: "赵六"}],
      choose: '',
      time: '',
      times: '',
      userList: [
        {id: 1, name: "张三", sex: '男', address: '成都市xxxxx'},
        {id: 2, name: "李四", sex: '男', address: '成都市xxxxx'},
        {id: 3, name: "王五", sex: '男', address: '成都市xxxxx'},
        {id: 4, name: "赵六", sex: '男', address: '成都市xxxxx'}
      ],
      bookList: [],
      dialogVisible: false,
      userForm: {
        userName: '',
        sex: 0,
        birthday: '',
        passWord: ''
      },
      //required:true  是否必须填写  ，  message 提示消息    trigger:'blur'  失去焦点时触发
      rules: {
        userName: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          {min: 2, max: 8, message: '名字长度2-8个字符', trigger: 'blur'}
        ],
        tel: [{required: true, message: '请输入手机号', trigger: 'blur'},
          {pattern: /^1[3|4|5|7|8][0-9]{9}$/, message: "请输入正确格式", trigger: 'blur'}]

      }
    }
  },
  methods: {
    deleteBook(id) {
      alert(JSON.stringify(id))

    },
    cancel() {
      dialogVisible: false,
          this.$refs.userForm.resetFields();
    },
    changeCurPage() {

    },
    addUser() {
      //第一种
      //   let param={'name':this.userForm.userName,'sex':this.userForm.sex,'time':this.userForm.birthday,'password':this.userForm.passWord }
      //  第二种
      //      let param=JSON.stringify(this.userForm)
      //      let config={
      //        headers:{
      //         ' content-Type':'application/json'
      //        }
      //      }

      //第三种   直接传 this.userForm


      axios.post("/api/user/addUser", this.userForm).then(res => {

        if ("ok" == res.data) {
          ElMessage({
            message: '添加成功',
            type: 'success'
          });

          //清空表单 给当前属性新增ref 属性
          //给需要清空的表单标签添加prop属性
          //   this.userForm = {}//可以清空
          this.$refs.userForm.resetFields();
        }


      })
      //验证规则
      //1、给表单加上 rules  ---属性--规则
      //2、给表单的每一行元素el-from -item 加上prop  属性，注意prop 属性名 和表单标签v-model 要一直


    }


  }

}
</script>

<style scoped>

</style>